<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div getTime="20"></div>
    <p data-index="1" data-hehe="xixi" data-list-name="andy"></p>

    <script>
        var div = document.querySelector('div');
        console.log(div.getTime); // 显示 undefined
        // 自定义的的推荐使用这种方式
        console.log(div.getAttribute('getTime')); // 显示 20

        var p = document.querySelector('p');
        // console.log(p.data - index); // 这样写会报错
        console.log(p.getAttribute('data-index'));
        // 使用element.setAttribute('属性名','值')
        p.setAttribute('data-index', '2');

        // H5 新增的获取自定义属性的方法: element.dataset.index 或者 element.dataset['index']
        console.log(p.dataset); // dataset是一个集合，里面存放了所有以 data- 开头的自定义属性
        console.log(p.dataset.index);
        console.log(p.dataset['hehe']);
        // 如果自定义属性里面有多个 - 链接的单词，我们获取的时候采取 驼峰命名法
        console.log(p.dataset.listName);
        console.log(p.dataset['listName']);

        // 总结：
        // 自定义属性目的：是为了保存并使用数据，有些数据保存在网页中而不用保存在数据库中
        // 自定义属性获取是通过getAttribute('属性') 获取
        // 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
        // H5规定自定义属性data-开头作为属性名并且赋值 比如<div data-index="1"></div>
    </script>

</body>

</html>